<template>
	<div>


		<el-row :gutter="10">
			<el-col :span="5">
				<el-input v-model="search.name" placeholder="请输入查找的姓名"></el-input>
			</el-col>
			<el-col :span="19">
				<el-button type="primary" icon="el-icon-search" plain @click="searchData()">搜索</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加</el-button>
			</el-col>
		</el-row>
		<el-table :data="result.tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column label="序号" prop="id">

			</el-table-column>

		
		     </el-table-column>
		     <el-table-column
		       label="客户姓名"
		       prop="name"
		     >
		 	  </el-table-column>
		 	  <el-table-column
		 	    label="性别"
		 	    prop="sex"
		 	  >
		 	  </el-table-column>
		 	<el-table-column
		 	  label="事项"
		 	  prop="event"
		 	>
		 	</el-table-column>
		 	<el-table-column
		 	  label="状态"
		 	  prop="status"
		 	>
		 	</el-table-column>
		 	<el-table-column
		 	  label="时间"
		 	  prop="time"
		 	>
		
		 	</el-table-column>
		 	
		 	<el-table-column
		 	  label="备注"
		 	  prop="comment"
		 	>
		 	</el-table-column>
		 	<el-table-column
		 	  label="处理人"
		 	  prop="handler"
		 	></el-table-column>
		  <el-table-column
		    label="处理内容"
		    prop="processContext"
		  ></el-table-column>
			
		  <el-table-column label="操作" width="220px">
			 
		 	 <template slot-scope="scope">
		 	          <template >
		 	            <el-button type="warning"
		 	              size="mini"
		 	             icon="el-icon-edit" 
		 	            @click="edit(scope.row.id)">修改</el-button>
		 	             
		 	            <el-button
		 	              size="mini"
		 	              type="danger"
						  icon="el-icon-delete-solid" 
		 	              @click="del(scope.row.id)">删除</el-button>
						   
		 	          </template>
		 	        </template>
		 	</el-table-column>
		    
		   
		</el-table>
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="500px">
			<ComplaintEdit v-if="show" :show.sync="show" @getData="getData()" :editid="editid">
			</ComplaintEdit>
		</el-dialog>




		
		<el-pagination
      style="margin-top:20px;"
      background
      layout="prev, pager, next"
      :page-count="result.pages"
      :current-page.sync="query.pageNo"
      :page-size="query.pageSize"
      @current-change="getData()">
    </el-pagination>
  

	</div>
</template>

<script>
	import ComplaintEdit from '@/views/complaint/edit'
	export default {
		name: 'Complaint',
		components: {
			ComplaintEdit,
		},
		data() {
			return {
				showNum: 0,
				editid: null,
				search: {
					name: ''
				},
				query: {
					name: '',
					pageNo: 1,
					pageSize: 8
				},
				result: {
					tableData: [],
					pages: 0
				},
				show: false,
				selectedrow: [],
				title: ''
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				this.axios.get('/complaint/list', response => {
					this.result.tableData = response.obj.records
					this.result.pages = response.obj.pages
					console.log(this.result.tableData)
				}, this.query)
			},
			searchData() {
				this.query.name = this.search.name
				this.query.pageNo = 1
				this.getData()
			},
			
			edit(id) {
				this.title = '修改信息'
				this.editid = id
				this.showNum++;
				this.show = true
			},
			
			add() {
				this.title = '添加';
				this.editid = null;
				this.showNum++;
				this.show = true;
			},

			del(id) {
				this.axios.del('/complaint/del', response => {
					this.getData()
				}, {
					id: id
				})
			},
			handleSelectionChange(val) {
				// val参数为所有选中行的数据
				this.selectedrow = val
			},
			batchdel() {
				if (this.selectedrow.length === 0) {
					this.$message('没有任何被选中的数据');
				} else {
					const ids = []
					for (let i = 0; i < this.selectedrow.length; i++) {
						ids.push(this.selectedrow[i].id)
					}
					this.axios.del('/ums-user/batchdel', response => {
						this.getData()
					}, {
						ids: ids
					})
				}
			},
		       open() {
		         this.$prompt('请输入处理内容', '提示', {
		           confirmButtonText: '确定',
		           cancelButtonText: '取消',
		         }).then(({ value }) => {
		           this.$message({
		             type: 'success',
		             message: '处理内容是: ' + value
		           });
		         }).catch(() => {
		           this.$message({
		             type: 'info',
		             message: '取消输入'
		           });       
		         });
		       }
		     }
		   }

	

</script>
<style scoped>
	/* el-table el-table-column{
		text-align: center;
	} */
</style>
le>
